<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>猜虫王名字游戏</title>  
    <style>  
        body {  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            justify-content: center;  
            height: 100vh;  
            font-family: Arial, sans-serif;  
            background-color: #f0f0f0;  
        }  
        #game {  
            background-color: white;  
            padding: 20px;  
            border-radius: 8px;  
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
            text-align: center;  
        }  
        input {  
            padding: 10px;  
            width: 70%;  
            margin-top: 10px;  
        }  
        button {  
            padding: 10px;  
            margin-top: 10px;  
            cursor: pointer;  
        }  
        #message {  
            margin-top: 20px;  
        }  
    </style>  
</head>  
<body>  
    <div id="game">  
        <h1>猜虫王名字游戏</h1>  
        <p>我想了一个虫王名字，试着猜猜看！</p>  
        <input type="text" id="guess" placeholder="请输入虫王名字">  
        <button onclick="makeGuess()">猜一下！</button>  
        <div id="message"></div>  
    </div>  

    <script>  
        const names = ["谢京君", "胡博", "范博", "刘小阳", "谢滨蔚", "谢林风"];  
        const randomIndex = Math.floor(Math.random() * names.length);  
        const randomName = names[randomIndex];  
        let attempts = 0;  

        function makeGuess() {  
            const userGuess = document.getElementById("guess").value.trim();  
            const messageDiv = document.getElementById("message");  
            attempts++;  

            if (!userGuess) {  
                messageDiv.innerHTML = "请输入一个名字！";  
            } else if (userGuess === randomName) {  
                messageDiv.innerHTML = `恭喜你！你猜对了，虫王就是 "${randomName}"。你总共猜了 ${attempts} 次。`;  
            } else {  
                messageDiv.innerHTML = `错误！再试试。可能的虫王有：${names.join(", ")}。`;  
            }  
        }  
    </script>  
</body>  
</html>